<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后端连接测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
        }
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .success { color: green; }
        .error { color: red; }
        .loading { color: orange; }
        button {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <h1>后端连接测试</h1>
    
    <div class="test-section">
        <h3>1. 测试后端基础连接</h3>
        <button onclick="testBasicConnection()">测试连接</button>
        <div id="basic-result" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>2. 测试API端点</h3>
        <button onclick="testAPIEndpoints()">测试API</button>
        <div id="api-result" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>3. 测试穿搭推荐API</h3>
        <button onclick="testRecommendationAPI()">测试推荐</button>
        <div id="recommendation-result" class="result"></div>
    </div>

    <script>
        async function testBasicConnection() {
            const resultDiv = document.getElementById('basic-result');
            resultDiv.innerHTML = '正在测试...';
            resultDiv.className = 'result loading';
            
            try {
                const response = await fetch('http://localhost:8000/api/', {
                    method: 'GET',
                    timeout: 10000
                });
                
                if (response.ok) {
                    resultDiv.innerHTML = '✅ 后端连接成功！\n状态码: ' + response.status;
                    resultDiv.className = 'result success';
                } else {
                    resultDiv.innerHTML = '⚠️ 后端响应异常\n状态码: ' + response.status;
                    resultDiv.className = 'result error';
                }
            } catch (error) {
                resultDiv.innerHTML = '❌ 后端连接失败！\n错误: ' + error.message;
                resultDiv.className = 'result error';
            }
        }
        
        async function testAPIEndpoints() {
            const resultDiv = document.getElementById('api-result');
            resultDiv.innerHTML = '正在测试API端点...';
            resultDiv.className = 'result loading';
            
            const endpoints = [
                { name: '用户列表', url: '/users/', method: 'GET' },
                { name: '创建用户', url: '/users/create_user/', method: 'POST' },
                { name: '穿搭推荐', url: '/users/recommend_outfit/', method: 'POST' },
                { name: '对话历史', url: '/users/chat_history/', method: 'GET' }
            ];
            
            let results = [];
            
            for (const endpoint of endpoints) {
                try {
                    const response = await fetch(`http://localhost:8000/api${endpoint.url}`, {
                        method: endpoint.method,
                        headers: endpoint.method === 'POST' ? { 'Content-Type': 'application/json' } : {},
                        body: endpoint.method === 'POST' ? JSON.stringify({}) : undefined,
                        timeout: 5000
                    });
                    
                    results.push(`✅ ${endpoint.name}: ${response.status}`);
                } catch (error) {
                    results.push(`❌ ${endpoint.name}: ${error.message}`);
                }
            }
            
            resultDiv.innerHTML = results.join('\n');
            resultDiv.className = 'result';
        }
        
        async function testRecommendationAPI() {
            const resultDiv = document.getElementById('recommendation-result');
            resultDiv.innerHTML = '正在测试穿搭推荐API...';
            resultDiv.className = 'result loading';
            
            try {
                const response = await fetch('http://localhost:8000/api/users/recommend_outfit/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ 
                        query: '为小明推荐夏季运动穿搭' 
                    }),
                    timeout: 15000
                });
                
                if (response.ok) {
                    resultDiv.innerHTML = '✅ 穿搭推荐API测试成功！\n状态码: ' + response.status;
                    resultDiv.className = 'result success';
                } else {
                    resultDiv.innerHTML = '⚠️ 穿搭推荐API响应异常\n状态码: ' + response.status;
                    resultDiv.className = 'result error';
                }
            } catch (error) {
                resultDiv.innerHTML = '❌ 穿搭推荐API测试失败！\n错误: ' + error.message;
                resultDiv.className = 'result error';
            }
        }
    </script>
</body>
</html>
